<!--
******功能应用组件模板******
功能应用组件:是最终应用程序的根组件,它注册在系统功能里。例如：权限设置，开发模块，逻辑引擎等
引用注册在全局Tsrv.compBox里, 参数需要compID+name+funName写全。
参考开发模块devModal写法
-->
<template>
  <div class="init-container o-reprot-chart">
    <div class="mask-container" v-if="isMask"></div>
    <div class="none-container" v-if="nonePermission">
      {{ $srv.getI18nByPath('others.noPermissions') }}···
    </div>
    <div v-if="loading" class="loader"></div>
    <div
      v-show="!loading && !nonePermission"
      :class="`iframe-container iframe-${config.name}`"
    >
      <iframe
        :id="`chartIframe${config.name}`"
        ref="chartIframe"
        :style="iframeStyle"
        :src="url"
        frameborder="0"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { I_cmd, T_cmd, T_srv, Tsrv, ifs, vue } from './config';

@T_srv.comp
export default class oReportChart extends vue {
  [x: string]: any;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  config: any;

  /* 组件名 */
  private name: string = 'oReportChart';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  /* 一个组件要调用多个相同组件时,组件箱内引用实例冲突,在此要定义实例变量接收,并在方法里加get 和 set  */
  // private GT_???CompBoxInfo : ifs.I_compBoxInfo;
  // private GT_???CompBoxInfo : ifs.I_compBoxInfo;
  // public get???CompBoxInfo(): ifs.I_compBoxInfo{
  //   return this.GT_compBoxInfo
  // }

  private _config: any = null;

  private funName: string = '';

  public isMask: boolean = false;

  private nonePermission: boolean = false;

  private loading: boolean = false;

  public toolbarList: Array<any> = [];

  private chartMode: 'jmreport' | 'jimubi' = 'jmreport';

  private chartStatus: 'view' | 'edit' = 'view';

  private reportChartCode: string = '';

  private reportChartMode: 'index' | 'view' = 'view';

  private url: string = `${this.$config.reportURL}list?token=${this.$store.state.User.token}`;

  private iframeContainerHtml: any;

  private iframeStyle: any = {
    height: `${document.body.offsetHeight}px`,
    width: `${document.body.offsetWidth}px`,
    transform: 'scale(1, 1)',
    position: 'absolute'
  };

  // public set???CompBoxInfo(e :ifs.I_compBoxInfo):void{
  //   this.GT_compBoxInfo = e
  // }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    /* 最终应用组件向外抛出引用实例,以供应用间调用 */
    Tsrv.compBox.addCompMergeName(
      Tsrv.compBox.getDefGUID(), // 全局compBox
      this.funName,
      this
    );

    this.iframeLoad();
    this.$nextTick(() => {
      this.iframeContainerHtml = document.getElementsByClassName(
        `iframe-${this.config.name}`
      )[0];
      // setTimeout
      const erd = this.$elementDetecter();
      erd.listenTo(this.iframeContainerHtml, (el: any) => {
        this.reframe(el);
      });
    });
    // 监听组件关联
    this.getDefListener();
    // 蒙层--
    if (this._config?.messageConfig?.custDefListener?.coordination) {
      this.$bus.$on(
        this._config.messageConfig.custDefListener.coordination,
        msg => {
          this.GT_command.receEventCoordination(msg);
        }
      );
    }
  }

  private init() {
    this._config = Tsrv.utils.clone(this.config, true);
    this.funName = this._config?.name || '';
    this.GT_command.newTcompCoordination(this._config);
    // 配置相关
    this.chartMode = this._config?.chartMode ?? 'jmreport';
    this.chartStatus = this._config?.chartStatus ?? 'view';

    this.getDefListener();
    this.GT_command.getReportChartCode();

    // 功能“浏览”权限
    const defaultPermission = Tsrv.utils.find(
      this._config.permission,
      item => item.area === 'default'
    );
    this.nonePermission = !defaultPermission?.data?.browse;
  }

  // 监听窗口变化
  private reframe(e) {
    const allHeight = document.body.offsetHeight;
    const allWidth = document.body.offsetWidth;
    this.iframeStyle.transform = `scale(${Math.floor(
      (e.offsetWidth / allWidth) * 10000
    ) / 10000}, ${Math.floor((e.offsetHeight / allHeight) * 10000) / 10000})`;
  }

  iframeLoad() {
    this.loading = true;
    const iframe = document.getElementById(`chartIframe${this.config.name}`);
    if (iframe['attachEvent']) {
      // IE
      iframe['attachEvent']('onload', () => {
        this.loading = false;
      });
    } else {
      // 非IE
      iframe.onload = () => {
        this.loading = false;
      };
    }
  }

  private getDefListener() {
    const custDefListener = this._config?.messageConfig?.custDefListener;
    if (
      !Tsrv.utils.noValue(this._config?.messageConfig?.custDefListener?.search)
    ) {
      this.$bus.$on(
        this._config?.messageConfig?.custDefListener.search[0],
        (m: any) => {
          // this.reportChartCode = m.option.autoCompleteInfo.key;
          // this.reportChartCode = m.content.val[0];
          this.reportChartCode =
            m?.option?.autoCompleteInfo?.data[m.content.ikey] || '';
          if (this.reportChartCode) {
            this.GT_command.getReportChartCode();
          }
        }
      );
    }
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */
    /* 最终应用组件销毁 */
    Tsrv.compBox.removeCompMergeName(Tsrv.compBox.getDefGUID(), this.funName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }
}
</script>
<style lang="scss" scoped>
.o-reprot-chart {
  //o-reprot-chart
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.iframe-container {
  height: 100%;
  width: 100%;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}

/* 最简约的loading 效果："···" */
// .loader {
//   width: 60px;
//   aspect-ratio: 4;
//   --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
//   background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
//   background-size: calc(100% / 3) 100%;
//   animation: l7 1s infinite linear;
// }
// @keyframes l7 {
//   33% {
//     background-size: calc(100% / 3) 0%, calc(100% / 3) 100%, calc(100% / 3) 100%;
//   }
//   50% {
//     background-size: calc(100% / 3) 100%, calc(100% / 3) 0%, calc(100% / 3) 100%;
//   }
//   66% {
//     background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 0%;
//   }
// }

/* 复杂的loading 效果："坦克" */
.loader {
  width: fit-content;
  font-size: 17px;
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  background: linear-gradient(#000 0 0) left, linear-gradient(#000 0 0) right;
  background-repeat: no-repeat;
  border-right: 5px solid #0000;
  border-left: 5px solid #0000;
  background-origin: border-box;
  position: relative;
  animation: l9-0 2s infinite;
}
.loader::before {
  content: 'Loading';
}
.loader::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 22px;
  height: 60px;
  background: linear-gradient(90deg, #000 4px, #0000 0 calc(100% - 4px), #000 0)
      bottom / 22px 20px,
    linear-gradient(90deg, red 4px, #0000 0 calc(100% - 4px), red 0) bottom 10px
      left 0/22px 6px,
    linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px,
    linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
  background-repeat: no-repeat;
  animation: l9-1 2s infinite;
}
@keyframes l9-0 {
  0%,
  25% {
    background-size: 50% 100%;
  }
  25.1%,
  75% {
    background-size: 0 0, 50% 100%;
  }
  75.1%,
  100% {
    background-size: 0 0, 0 0;
  }
}
@keyframes l9-1 {
  25% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: 0;
  }
  25.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: 0;
  }
  50% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0,
      bottom 0 left 50%;
    left: calc(100% - 22px);
  }
}

/* 最简约的loading 效果："Loading..." */
// .loader {
//   --w:10ch;
//   font-weight: bold;
//   font-family: monospace;
//   font-size: 30px;
//   line-height: 1.2em;
//   letter-spacing: var(--w);
//   width: var(--w);
//   overflow: hidden;
//   white-space: nowrap;
//   color: #0000;
//   animation: l17 2s infinite;
// }
// .loader:before {
//   content:"Loading...";
// }

// @keyframes l17 {
//    0% {text-shadow:
//         calc( 0*var(--w)) -1.2em #000,calc(-1*var(--w)) -1.2em #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000,
//         calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//    4% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) -1.2em #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000,
//         calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//    8% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000,
//         calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//   12% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000,
//         calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//   16% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) -1.2em #000,
//         calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//   20% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//   24% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//   28% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//   32% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
//   36% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 0      #000,calc(-9*var(--w)) -1.2em #000}
//   40%,
//   60% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 0      #000,calc(-9*var(--w)) 0      #000}
//   64% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 0      #000,calc(-9*var(--w)) 1.2em  #000}
//   68% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   72% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   76% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   80% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000,
//         calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   84% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 1.2em  #000,
//         calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   88% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000,
//         calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   92% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 1.2em  #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000,
//         calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   96% {text-shadow:
//         calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 1.2em  #000,calc(-2*var(--w)) 1.2em  #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000,
//         calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
//   100% {text-shadow:
//         calc( 0*var(--w)) 1.2em  #000,calc(-1*var(--w)) 1.2em  #000,calc(-2*var(--w)) 1.2em  #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000,
//         calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
// }
</style>
